<template>
  <view class="member-item bgf" @click.stop="toDetails">
    <!-- 头部 -->
    <view class="member-item__header">
      <view class="company-name value text-overflow-1">{{ item.memberName }}</view>
      <text class="status-text">{{ getStatusText }}</text>
    </view>
    <!-- 内容 -->
    <view class="content-item">
      <text class="label">续期职务：</text>
      <view class="value text-overflow-1">
        <text>{{ item.nowLevelName || item.levelName }}</text>
      </view>
    </view>
    <view class="content-item">
      <text class="label">应缴金额：</text>
      <view class="value text-overflow-1">
        <text>{{ item.unit }}</text>
      </view>
    </view>
    <view class="content-item">
      <text class="label">负责人：</text>
      <view class="value text-overflow-1">
        <text>{{ item.leadingName }}</text>
      </view>
    </view>
    <view class="content-item">
      <text class="label">到期时间：</text>
      <view class="value text-overflow-1">
        <text>{{ item.memberEndTime }}</text>
        <text :style="{ marginLeft: '20rpx', color: statusColor }">
          {{ item.daysRemainingStr }}
        </text>
      </view>
      <view class="right-text">
        <text class="text">查看详情</text>
        <image class="right-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/admin/icon-2.png" alt="" />
      </view>
    </view>
    <!-- 底部 -->
    <view class="member-item__bottom">
      <view style="flex: 1"></view>
      <TButton
        text="拨打电话"
        type="primary"
        class="gutter-btn"
        custom-class="borderBtn h-32 linh-32 br-4"
        @click.stop="makePhoneCall(item.leadingPhone)"
      />
      <TButton
        text="续费设置"
        type="primary"
        class="gutter-btn"
        custom-class="h-32 linh-32 br-4"
        @click.stop="handleClick"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
  import type { SysMemberPageListResult } from '@/api/admin/types';
  import { PaymentStatusEnum } from '@/enums/membershipEnum';
  import { type PropType, computed, ref } from 'vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { navigateTo } from '@/router';

  const props = defineProps({
    item: {
      type: Object as PropType<SysMemberPageListResult>,
      required: true,
    },
    showBtn: Boolean,
  });

  const emit = defineEmits(['click']);

  const statusColor = ref();

  const getStatusText = computed(() => {
    switch (props.item.paymentStatus) {
      case PaymentStatusEnum.DUE:
        statusColor.value = '#faad14';
        return '临期会员';
      case PaymentStatusEnum.NOTPAYCOST:
        statusColor.value = '#1890ff';
        return '待缴费';
      case PaymentStatusEnum.ARREARAGE:
        statusColor.value = '#ff0000';
        return '欠费';
      default:
        return '';
    }
  });

  function toDetails() {
    navigateTo({ name: 'paymentInfoDetails', options: { item: props.item } });
  }

  function makePhoneCall(phone: string) {
    uni.makePhoneCall({ phoneNumber: phone });
  }

  function handleClick() {
    emit('click', props.item);
  }
</script>

<style lang="scss" scoped>
  $backgroundColor: #fff;
  .member-item {
    // margin-top: 4rpx;
    font-size: $uni-font-size-base;
    margin: 0 32rpx;
    margin-top: 24rpx;
    border-radius: 24rpx;
    overflow: hidden;
    .label {
      color: #808080;
    }
    .value {
      color: #333;
    }
    &__header {
      padding: 0 20rpx;
      height: 88rpx;
      background-color: $backgroundColor;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4rpx;
      border-radius: 20rpx;
      .company-name {
        font-size: $uni-font-size-lg;
        font-weight: bold;
      }
      .status-text {
        flex-shrink: 0;
        color: #ea5e0e;
      }
    }
    .content-item {
      flex: 1;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      padding: 0 20rpx;
      position: relative;
      .label {
        color: $uni-text-color-placeholder;
      }
      .value {
        color: $uni-text-color;
        margin-left: 10rpx;
      }
      .phone-icon {
        width: 40rpx;
        height: 40rpx;
        margin-left: 14rpx;
      }
      .right-text {
        position: absolute;
        right: 20rpx;
        display: flex;
        align-items: center;
        color: $uni-text-color-placeholder;
      }
      .right-icon {
        width: 24rpx;
        height: 24rpx;
        margin-left: 4rpx;
      }
    }
    .content-item:last-child {
      padding-bottom: 30rpx;
    }

    &__bottom {
      background-color: $backgroundColor;
      padding: 20rpx 30rpx;
      display: flex;
      border-top: 1rpx #f5f5f5 solid;
    }

    .content-mid {
      flex: 1;
      flex-shrink: 1;
      margin: 0 30rpx;
    }
  }
</style>
